<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/changInfo.css">
    <link rel="stylesheet" href="./css/tail.css">
    <link rel="stylesheet" href="./css/公共头尾部.css">
</head>
<body>
<body>
    <header>
        <ul class="topul">
            <a href=""><li>欢迎来到丝芙兰</li></a>
            <a href="javascript:void(0)" class="zz"><li> 请登录</li></a>
            <a href="javascript:void(0)"><li> 免费注册</li></a>
            <a href=""><li> 手机验证码登录</li></a>
            <a href="" class="aa"><li> 常见问题</li></a>
            <a href="" class="a1"><img src="./img/t1.png" alt="">&nbsp;<li> 我的丝芙兰</li></a>
            <a href="" class="a1"><img src="https://ssl1.sephorastatic.cn/soa/pc/images/vip-club.png" alt="">&nbsp;<li> 会员俱乐部</li></a>
            <a href="" class="a1"><img src="https://ssl1.sephorastatic.cn/soa/pc/images/mobile-sephora.png" alt="">&nbsp;<li> 手机丝芙兰</li></a>
            <a href=""><li> 帮助中心</li></a>
            <a href=""><li> 品牌合作</li></a>
        </ul>
    </header>
    <!-- 头部搜索栏 -->
    <section>
        <a href="http://localhost:65535/sifulan.html"><h2> SEPHORA</h2></a>

        <div class="box1">
            <input type="text" name="" id="text" placeholder="轻熟肌抗氧精华">
            <ul class="search_result_list">
        
            </ul>
            <input type="submit" value="搜索"id="text1" >
            <ul id="pvp">
                <li><a href="">丝芙兰品牌大牌周</a></li>
                <li><a href="">养肤补水面膜</a></li>
                <li><a href="">轻熟肌抗氧精华</a></li>
                <li><a href="">防晒隔离必备</a></li>
                <li><a href="">畅销底妆合辑</a></li>
                <li><a href="">清爽元气香氛</a></li>
                <li><a href="">个护好物盘点</a></li>
            </ul>
        </div>
        <div class="box2">
            <a href="http://localhost:65535/www/gwc.html"><img src="./img/t2.png" alt=""><p>购物车<em>0</em>件</p></a>
        </div>
    </section>
    <div class="contain clearfix">
        <div class="body clearfix">
            <div class="centerMain clearfix main">
                <div class="leftTree clearfix">
                    <div class="title">
                        <a href="">我的丝芙兰</a>
                    </div>
                    <ul class="NavTree mt20 ml40">
                        <li>
                            <p>交易管理 </p>
                            <div class="hideArrow"></div>
                        </li>
                        <ul>
                             <li><a href="">线上订单</a></li>
                             <li><a href="">线下订单</a></li>
                             <li><a href="">我的兑换记录</a></li>
                             <li><a href="">退货售后</a></li>
                        </ul>
                        <li>
                            <p>我的权益</p>
                            <div class="hideArrow"></div>
                        </li>
                        <ul>
                            <li><a href="">积分详情</a></li>
                            <li><a href="">会员权益</a></li>
                            <li><a href="">我的优惠券</a></li>
                        </ul>
                        <li>
                            <p>账户管理</p>
                            <div class="hideArrow"></div>
                        </li>
                        <ul>
                            <li><a href="./changeInfo.html">编辑个人资料</a></li>
                            <li><a href="">管理收货地址</a></li>
                            <li><a href="./changeCode.html">更改密码</a></li>
                            <li><a href="">隐私设置</a></li>
                        </ul>
                        <li>
                            <p>玩美服务</p>
                            <div class="hideArrow"></div>
                        </li>
                        <ul>
                            <li><a href="">预约中心</a></li>
                            <li><a href="">申领中心</a></li>
                            <li><a href="">在线客服</a></li>
                            <li><a href="">帮助中心</a></li>
                        </ul>
                    </ul>

                </div>
                <div class="rightBg clearfix">
                    <div class="title">
                        编辑个人资料
                    </div>
                    <div class="privateRightmain clearfix">
                        
                            <form class="message-top" action="http://localhost:65535/setUser" method="post" enctype="multipart/form-data">
                                <li class="first" style="margin-bottom: 0;">
                                    <em class="show"></em>
                                    <span >
                                        姓名/称谓
                                    </span>
                                    
                                    <input type="text" style="width: 200px
                                    ;" class="personalname">
                                </li>
                                <div class="privateRightMain-row">
                                    <div class="error-tips errorname">
                                        <div class="errorIcon"></div>
                                        <div class="tip">请输入姓名称谓

                                        </div>
                                    </div>
                                </div>
                                <li style="margin-left: 93px">
                                    <em class="show"></em>
                                    <span>
                                        手机
                                    </span>
                                    <input type="text" style="width: 200px;;" class="phonenumber">
                                </li>
                                <li style="margin-bottom: 1px;">
                                    <em class="show"></em>
                                    <span >
                                        邮箱
                                    </span>
                                    <input type="text" style="width: 200px;" class="mailbox">
                                </li>
                                <li class="text" style="margin-bottom: 0;">*E-mail地址默认为注册账户邮箱,修改E-mail地址同时会修改注册账户。邮箱仅能设置一次,请谨慎填写。

                                </li>
                                <div class="privateRightMain-row" >
                                    <div class="error-tips errormail"  >
                                        <div class="errorIcon"></div>
                                        <div class="tip" >请输入正确邮箱</div>
                                    </div>
                                </div>
                                <li>
                                    <em class="show"></em>
                                    <span>
                                        性别
                                    </span>
                                    <input type="checkbox" class="checked"><span>男</span>
                                    <input type="checkbox" class="checked"><span>女</span>
                                </li>
                                <li style="margin-bottom: 1px;">
                                    <em class="show"></em>
                                    <span>
                                        生日
                                    </span>
                                    <select class="dropdwon-select-box">
                                        <option data-index="-1">请选择</option>
                                        <option data-index="0">2022</option>
                                        <option data-index="1">2021</option>
                                        <option data-index="2">2020</option>
                                        <option data-index="3">2019</option>
                                        <option data-index="4">2018</option>
                                        <option data-index="5">2017</option>
                                        <option data-index="6">2016</option>
                                        <option data-index="7">2015</option>
                                        <option data-index="8">2014</option>
                                        <option data-index="9">2013</option>
                                        <option data-index="10">2012</option>
                                        <option data-index="11">2011</option>
                                        <option data-index="12">2010</option>
                                        <option data-index="13">2009</option>
                                        <option data-index="14">2008</option>
                                        <option data-index="15">2007</option>
                                        <option data-index="16">2006</option>
                                        <option data-index="17">2005</option>
                                        <option data-index="18">2004</option>
                                        <option data-index="19">2003</option>
                                        <option data-index="20">2002</option>
                                        <option data-index="21">2001</option>
                                        <option data-index="22">2000</option>
                                        <option data-index="23">1999</option>
                                        <option data-index="24">1998</option>
                                        <option data-index="25">1997</option>
                                        <option data-index="26">1996</option>
                                        <option data-index="27">1995</option>
                                        <option data-index="28">1994</option>
                                        <option data-index="29">1993</option>
                                        <option data-index="30">1992</option>
                                        <option data-index="31">1991</option>
                                        <option data-index="32">1990</option>
                                        <option data-index="33">1989</option>
                                        <option data-index="34">1988</option>
                                        <option data-index="35">1987</option>
                                        <option data-index="36">1986</option>
                                        <option data-index="37">1985</option>
                                        <option data-index="38">1984</option>
                                        <option data-index="39">1983</option>
                                        <option data-index="40">1982</option>
                                        <option data-index="41">1981</option>
                                        <option data-index="42">1980</option>
                                        <option data-index="43">1979</option>
                                        <option data-index="44">1978</option>
                                        <option data-index="45">1977</option>
                                        <option data-index="46">1976</option>
                                        <option data-index="47">1975</option>
                                        <option data-index="48">1974</option>
                                        <option data-index="49">1973</option>
                                        <option data-index="50">1972</option>
                                        <option data-index="51">1971</option>
                                        <option data-index="52">1970</option>
                                        <option data-index="53">1969</option>
                                        <option data-index="54">1968</option>
                                        <option data-index="55">1967</option>
                                        <option data-index="56">1966</option>
                                        <option data-index="57">1965</option>
                                        <option data-index="58">1964</option>
                                        <option data-index="59">1963</option>
                                        <option data-index="60">1962</option>
                                        <option data-index="61">1961</option>
                                        <option data-index="62">1960</option>
                                        <option data-index="63">1959</option>
                                        <option data-index="64">1958</option>
                                        <option data-index="65">1957</option>
                                        <option data-index="66">1956</option>
                                        <option data-index="67">1955</option>
                                        <option data-index="68">1954</option>
                                        <option data-index="69">1953</option>
                                        <option data-index="70">1952</option>
                                        <option data-index="71">1951</option>
                                        <option data-index="72">1950</option>
                                        <option data-index="73">1949</option>
                                        <option data-index="74">1948</option>
                                        <option data-index="75">1947</option>
                                        <option data-index="76">1946</option>
                                        <option data-index="77">1945</option>
                                        <option data-index="78">1944</option>
                                        <option data-index="79">1943</option>
                                        <option data-index="80">1942</option>
                                        <option data-index="81">1941</option>
                                        <option data-index="82">1940</option>
                                        <option data-index="83">1939</option>
                                        <option data-index="84">1938</option>
                                        <option data-index="85">1937</option>
                                        <option data-index="86">1936</option>
                                        <option data-index="87">1935</option>
                                        <option data-index="88">1934</option>
                                        <option data-index="89">1933</option>
                                        <option data-index="90">1932</option>
                                        <option data-index="91">1931</option>
                                        <option data-index="92">1930</option>
                                    </select>
                                    <span>年</span>
                                    <select class="dropdwon-select-box "><option data-index="-1">请选择
                                        </option>
                                        <option data-index="0">1</option>
                                        <option data-index="1">2</option>
                                        <option data-index="2">3</option>
                                        <option data-index="3">4</option>
                                        <option data-index="4">5</option>
                                        <option data-index="5">6</option>
                                        <option data-index="6">7</option>
                                        <option data-index="7">8</option>
                                        <option data-index="8">9</option>
                                        <option data-index="9">10</option>
                                        <option data-index="10">11</option>
                                        <option data-index="11">12</option>
                                    </select>
                                    <span>月</span>
                                    <select class="dropdwon-select-box "><option data-index="-1">请选择</option>
                                        <option data-index="0">1</option>
                                        <option data-index="1">2</option>
                                        <option data-index="2">3</option>
                                        <option data-index="3">4</option>
                                        <option data-index="4">5</option>
                                        <option data-index="5">6</option>
                                        <option data-index="6">7</option>
                                        <option data-index="7">8</option>
                                        <option data-index="8">9</option>
                                        <option data-index="9">10</option>
                                        <option data-index="10">11</option>
                                        <option data-index="11">12</option>
                                        <option data-index="12">13</option>
                                        <option data-index="13">14</option>
                                        <option data-index="14">15</option>
                                        <option data-index="15">16</option>
                                        <option data-index="16">17</option>
                                        <option data-index="17">18</option>
                                        <option data-index="18">19</option>
                                        <option data-index="19">20</option>
                                        <option data-index="20">21</option>
                                        <option data-index="21">22</option>
                                        <option data-index="22">23</option>
                                        <option data-index="23">24</option>
                                        <option data-index="24">25</option>
                                        <option data-index="25">26</option>
                                        <option data-index="26">27</option>
                                        <option data-index="27">28</option>
                                        <option data-index="28">29</option>
                                        <option data-index="29">30</option>
                                        <option data-index="30">31</option>
                                    </select>
                                    <span>日</span>
                                </li>
                                <li class="text">*生日仅能设置一次，请谨慎填写。</li>
                                <div class="headP">
                                    <div class="headP-title">
                                        <p>头像</p>
                                        <ul>
                                            <li class="active">推荐头像</li>
                                            <li class="active">上传头像</li>
                                        </ul>
                                    </div>
                                    <div class="headPortrait-upload">
                                        <img src="./imgs/defaultAvatar.jpg" alt="" class="preview">
                                        <div class="file_style">

                                            <input class="cover" type="file" value="修改头像" name="avatar" onchange="setImagePreview();">修改头像
                                        </div>
                                     
                                    </div>
                                    <div class="headPortrait-recommend-cont">
                                        <ul class="headPortrait-recommend">
                                            <li data-index="0" class="">
                                                <img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_man01_3x.png">
                                            </li>
                                            <li data-index="1" class="active">
                                                <img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_man02_3x.png">
                                            </li>
                                                <li data-index="2" class="">
                                                    <img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_man03_3x.png">
                                                </li>
                                                <li data-index="3" class="">
                                                    <img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_man04_3x.png"></li>
                                                    <li data-index="4" class=""><img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_woman01_3x.png"></li>
                                                    <li data-index="5" class=""><img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_woman02_3x.png"></li>
                                                    <li data-index="6" class=""><img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_woman03_3x.png"></li>
                                                    <li data-index="7" class=""><img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_woman04_3x.png"></li>
                                                    <li data-index="8" class=""><img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_woman05_3x.png"></li>
                                                    <li data-index="9" class=""><img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_woman06_3x.png"></li>
                                                    <li data-index="10" class=""><img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_woman07_3x.png"></li>
                                                    <li data-index="11" class=""><img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_woman08_3x.png"></li>
                                                </ul>
                                        <div class="headPortrait-recommend-upload">
                                            <img src="https://ssl1.sephorastatic.cn/wcsfrontend/members/system_man02_3x.png" alt="">
                                        </div>
                                    </div>
                                    
                                    
                                </div>
                                <li>
                                    <span>昵称</span>
                                    <input type="text" style="width: 200px;" class="nick_name"><span style="color:red ;letter-spacing:normal;display: none;">修改成功</span>
                                </li>
                                <li>
                                    <span id="nLs">省市区</span>
                                    <select class="dropdwon-select-box select-birthday-select">
                                        <option data-index="-1">请选择</option>
                                        <option data-index="0">北京</option>
                                        <option data-index="1">上海</option>
                                        <option data-index="2">山东</option>
                                        <option data-index="3">山西</option>
                                        <option data-index="4">河北</option>
                                        <option data-index="5">陕西</option>
                                        <option data-index="6">江苏</option>
                                        <option data-index="7">浙江</option>
                                        <option data-index="8">广东</option>
                                        <option data-index="9">四川</option>
                                        <option data-index="10">安徽</option>
                                        <option data-index="11">海南</option>
                                        <option data-index="12">河南</option>
                                        <option data-index="13">湖南</option>
                                        <option data-index="14">湖北</option>
                                        <option data-index="15">黑龙江</option>
                                        <option data-index="16">辽宁</option>
                                        <option data-index="17">吉林</option>
                                        <option data-index="18">甘肃</option>
                                        <option data-index="19">云南</option>
                                        <option data-index="20">贵州</option>
                                        <option data-index="21">江西</option>
                                        <option data-index="22">福建</option>
                                        <option data-index="23">青海</option>
                                        <option data-index="24">天津</option>
                                        <option data-index="25">内蒙古自治区</option>
                                        <option data-index="26">广西壮族自治区</option>
                                        <option data-index="27">重庆</option>
                                        <option data-index="28">西藏</option>
                                        <option data-index="29">宁夏回族自治区</option>
                                        <option data-index="30">新疆</option>
                                    </select>
                                    <select class="dropdwon-select-box select-birthday-select"><option data-index="-1">请选择</option></select>
                                    <select class="dropdwon-select-box select-birthday-select"><option data-index="-1">请选择</option></select>
                                </li>
                                <li>
                                    <span>地址</span>
                                    <input type="text" style="width: 620px;">
                                </li>
                                <li>
                                     <input class="messageSave" type="submit" value="保存信息"></input>
                                </li>
                               

                            </form>
                           
                        
                    </div>  
                </div>
            </div>
        </div>
    </div>
    <!-- foodtop -->

    <div class="foodtop">
        <div class="yilou">
            <div class="yilou1"></><img src="./imgs/b2 (1).png" alt="">
            <p><b>顺丰ems速达</b></p>
            </div>
            <div class="yilou1"></><img src="./imgs/b2 (2).png" alt="">
            <p><b>丰富礼赠</b></p>
            </div>
            <div class="yilou1"></><img src="./imgs/b2 (3).png" alt="">
            <p><b>100%正品</b></p>
            </div>
            <div class="yilou1"></><img src="./imgs/b2 (4).png" alt="">
            <p><b>无障碍退款</b></p>
            </div>
            <div class="yilou1"></><img src="./imgs/b2 (5).png" alt="">
            <p><b>安全支付</b></p>
            </div>
        </div><hr>
        <br>
        <br>
        <br>
        <br>
        <div class="cc">
                <ul class="xoxo">
                    <li class="xoxo1"><a href="">购物流程</a></li>
                    <li  class="bb1" ><a>大宗团购/采购</a></li>
                    <li class="bb1" ><a>丝芙兰预付卡章程</a></li>
                </ul> 
                <ul class="xoxo">
                    <li class="xoxo1"><a href="">支付/配送</a></li>
                    <li class="bb1" ><a>在线支付</a></li>
                    <li class="bb1" ><a>配送时间</a></li>
                </ul> 
                <ul class="xoxo">
                    <li class="xoxo1"><a href="">售后服务</a></li>
                    <li class="bb1" ><a>退换货规定</a></li>
                    <li class="bb1" ><a>退款及退货说明</a></li>
                </ul> 
                <ul class="xoxo">
                    <li class="xoxo1"><a href="">关于丝芙兰</a></li>
                    <li class="bb1" ><a>联系我们</a></li>
                    <li class="bb1" ><a>品牌合作/Baand collll</a></li>
                    <li class="bb1" ><a>营私</a></li>
                </ul> 
                <ul class="xoxo">
                    <li class="xoxo1"><a href="">购物流程</a></li>
                    <li class="bb1" ><a>大宗团购/采购</a></li>
                    <li class="bb1" ><a>卡兹男</a></li>
                </ul> 
                <ul class="xoxo">
                    <li class="xoxo1"><a href="">购物流程</a></li>
                    
                </ul> 
                <ul class="lastul">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </ul>

                
        </div>
    
    
    </div>

    
    <footer>
        <ul>
            <a href=""><img src="./imgs/t3.jpg" alt=""><p class="p1">沪公网安备 31010602003121号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ICP备案序号:沪ICP备05026645号-1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;食品经营许可证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网站使用条款&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;严正声明</p></a><br>
            <a href=""><p class="p2"> &nbsp;&nbsp;&nbsp;本网站隶属于丝芙兰（上海）化妆品销售有限公司（企业法人营业执照）预付卡信息对接唯一标识 : 310101F5201530100309</p></a>
        </ul>
    </footer>
</body>
<script>
    const omailbox =document.querySelector(".mailbox");
    const omessageSave=document.querySelector(".messageSave");
    const oerrorname =document.querySelector(".errorname");
    const oerrormail =document.querySelector(".errormail");
    const opersonalname = document.querySelector(".personalname");
    const oerrorIcon =document.querySelector(".errorIcon");
    const ocover = document.querySelector(".cover");
   
    const ophonenumber = document.querySelector(".phonenumber");

    omessageSave.onclick = function(){
        var reg =/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
        if( !opersonalname.value) {
            oerrorname.style.display = "block";
            return;
        }
        if(reg.test(omailbox.value)){
            alert("成功");
        }else{
        oerrormail.style.display = "block";    
        }
    }

    // omessageSave.onclick = function(){
    //     // 发起登录请求，携带数据
    //     ajaxPost({
    //         type:"post",
    //         url: "http://localhost:3000/setUser",
    //         data:{
    //             username: opersonalname.value,
    //             phonenumber:ophonenumber.value,
    //             mailbox:omailbox.value
    //         },
    //         success:res=>{
    //             console.log(res);
    //         },
    //         error:code=>{
    //             console.log(code);
    //         }
    //     })
    // }

    // function ajaxPost(ops = {}){
    //     let {type="post", success, error, data={}, url} = ops;
    //     let str = "";
    //     for(let i in data){
    //         str += `${i}=${data[i]}&`;
    //     }
    //     // 2. post的数据不在url身上拼接
    //     // url += "?" + str.slice(0,-1);
    //     const xhr = new XMLHttpRequest();
    //     // 1. 注意open的第一个参数为post
    //     xhr.open(type, url, true);
    //     xhr.onreadystatechange = function(){
    //         console.log(xhr.status);
    //         if(xhr.readyState === 4 && xhr.status === 200){
    //             success(xhr.responseText);
    //         }else if(xhr.readyState === 4 && xhr.status !== 200){
    //             error && error(xhr.status);
    //         }
    //     }
    //     // 3. 修改请求头对象中的Content-type
    //     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //     // 4. post的数据交给send的参数
    //     xhr.send(str.slice(0,-1));
    // }
    var docObj = document.querySelector(".cover");
    var imgObjPreview = document.querySelector(".preview");

    imgObjPreview.src=localStorage.getItem(".preview")
    function setImagePreview() {
       
      
       
        console.log(docObj.files[0])
        if (docObj.files && docObj.files[0]) {
             imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
             localStorage.setItem(".preview", imgObjPreview.src)

        }
}


    const nick_name = document.querySelector('.nick_name')
    nick_name.onchange = function(e){
            const ajax = new XMLHttpRequest
            ajax.open('post','http://localhost:65535/setUser')
            ajax.onload = function(){
                if(ajax.status >= 200 && ajax.status < 300){
                    console.log(ajax.response)
                    if(ajax.response == '昵称修改成功'){
                        document.cookie = `username=${nick_name.value}`
                        nick_name.nextElementSibling.style.display = 'inline'
                        setTimeout(() => {
                            location.reload()
                        }, 2000);
                    }
                }
            }
            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            ajax.send(`username=${document.cookie.split('=')[1]}&newname=${nick_name.value}`)   
    }
</script>
<script src="./js/公共头尾部.js"></script>
</html>